<template>
  <view class="common-content">
    <view class="common-tabs-box">
      <u-tabs-swiper
        activeColor="#F4333C"
        ref="tabs"
        :list="list"
        :current="current"
        @change="change"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <view class="common-content-box">
      <view
        class="common-list"
        v-for="(item, index) in dataList"
        :key="index"
        @click="toDetail(item)"
      >
        <image
          :src="item.coverPath || coverPath"
          mode=""
          class="common-list-image2"
        ></image>
        <!-- <audio src="" class="common-list-audio" :poster="item.coverPath || coverPath" :name="item.seriesName" :author="item.expertName"  controls v-if="current == 2"></audio> -->
        <text :class="'common-list-status' + item.status">
          {{
            item.status == 0
              ? "未审核"
              : item.status == 1
              ? "待审核"
              : item.status == 2
              ? "已通过"
              : item.status == 3
              ? "已驳回"
              : item.status == 4
              ? "已上架"
              : "已下架"
          }}
        </text>
        <view class="course-list2">
          <view class="common-news-title">
            <text class="top" v-if="item.isTop == 1">置顶</text>
            <!-- {{item.courseDuration ? item.courseDuration  : ''}} -->
            {{ item.seriesName || seriesName }}
          </view>
          <view class="course-list2-desc">
            <view class="course-list2-desc-text" v-if="item.categoryStr">
              <text class="tag" v-for="tag in item.categoryStr.split(' ')">{{
                tag
              }}</text>
            </view>
          </view>
          <view class="desc-price">
            <view class="demo-price2" v-if="item.isCharge == '0'"> 免费 </view>
            <view class="demo-price1" v-else-if="item.isCharge == '1'">
              ￥<text class="bigger">{{ item.price.toFixed(2) || price }}</text>
            </view>
            <view class="demo-person">
              <text v-if="item.status != 1 && item.status != 3"
                >{{ item.courseWatchCount || 0 }}人看过
              </text>
              <text v-if="item.status == 3" @click.stop="toWhy(item)"
                >查看原因</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="view-more" v-if="dataList.length > 0">
      {{ isMore ? "上滑查看更多" : "没有更多了" }}
    </view>
    <view class="view-more" v-if="dataList.length == 0"> 暂无数据 </view>
  </view>
</template>

<script>
import { API } from "@/config/myApi.js";
import { formatDuring } from "@/utils/filters.js";
export default {
  data() {
    return {
      // tabs数据
      list: [
        {
          name: "全部",
        },
        {
          name: "视频",
        },
        {
          name: "音频",
        },
        {
          name: "图文",
        },
      ],
      current: 0,
      // 更多
      isMore: false,
      dataList: [],
      params: {
        courseType: "",
        page: 1,
        rows: this.$store.state.rows,
      },
      rows: this.$store.state.rows,
      // mock
      coverPath: "",
      seriesName: "--",
      courseDescribe: "--",
      price: "--",
    };
  },
  onLoad() {
    this.getCurrentExpertCourseList();
  },
  onReachBottom() {
    if (this.isMore) {
      this.params.page++;
      this.addRandomData();
    }
  },
  methods: {
    // 查询当前专家所有课程系列
    getCurrentExpertCourseList(pram) {
      if (pram == undefined) {
        pram = {
          courseType: "",
          page: 1,
          rows: this.rows,
        };
      }
      console.log("参数", pram);
      API.currentExpertCourseList(pram).then((res) => {
        if (res.code == 200) {
          let result = res.result.records;
          if (result.length != 0) {
            this.dataList = result;
          }
          if (result.length >= this.rows) {
            this.isMore = true;
          } else {
            this.isMore = false;
          }
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        }
        console.log("全部课程", res);
      });
    },
    // tabs切换
    change(index) {
      if (this.current != index) {
        this.current = index;
        this.params.page = 1;
        if (index !== 0) {
          let courseType = --index + "";
          console.log("courseType", courseType);
          let pram = {
            courseType,
            page: 1,
            rows: this.rows,
          };
          // console.log('参数',pram);
          this.getCurrentExpertCourseList(pram);
        } else {
          this.getCurrentExpertCourseList();
        }
        // console.log(courseType);
      }
    },
    // 加载更多
    addRandomData() {
      let index = this.current;
      let courseType = "";
      if (this.current !== 0) {
        courseType = --index + "";
      }
      let pram = {
        ...this.params,
        courseType,
      };
      console.log("参数", pram);
      API.currentExpertCourseList(pram).then((res) => {
        if (res.code == 200) {
          let result = res.result.records;
          // this.isMore = result.length > 0;
          if (result.length != 0) {
            this.dataList = this.dataList.concat(result);
          }
          if (result.length >= this.rows) {
            this.isMore = true;
          } else {
            this.isMore = false;
          }
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        }
      });
    },
    toDetail(item) {
      // uni.setStorageSync('courseDetail',item)
      uni.navigateTo({
        url: `/pages/mine/course/courseDetail?id=${item.id}&status=${item.status}`,
      });
    },
    toWhy(item) {
      uni.setStorageSync("whyDetail", item);
      // console.log(item);
      uni.navigateTo({
        url: "/pages/mine/course/why",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./courseList.scss";
.course-list2 {
  .common-news-title {
    height: 40rpx;
  }
}
</style>
